<template>
  <div class="resume-editor-container">
    <!-- 基础信息表单 -->
    <form class="resume-form" @submit.prevent="saveResume">
      <h3>基础信息</h3>
      <input v-model="resume.name" placeholder="姓名" />
      <input v-model="resume.gender" placeholder="性别" />
      <input v-model="resume.birthday" type="date" placeholder="出生日期" />
      <input v-model="resume.phone" placeholder="电话" />
      <input v-model="resume.email" placeholder="邮箱" />
      <input v-model="resume.city" placeholder="城市" />
      <textarea v-model="resume.self_intro" placeholder="自我介绍"></textarea>

      <!-- 教育经历 -->
      <h3>教育经历</h3>
      <div v-for="(edu, idx) in resume.educations" :key="idx" class="edu-block">
        <input v-model="edu.school" placeholder="学校" />
        <input v-model="edu.degree" placeholder="学历" />
        <input v-model="edu.major" placeholder="专业" />
        <input v-model="edu.start_date" type="date" placeholder="开始时间" />
        <input v-model="edu.end_date" type="date" placeholder="结束时间" />
        <textarea v-model="edu.desc" placeholder="描述"></textarea>
        <button class="del-btn" @click.prevent="removeEducation(idx)">删除</button>
      </div>
      <button class="add-btn" @click.prevent="addEducation">添加教育经历</button>

      <!-- 工作经历 -->
      <h3>工作经历</h3>
      <div v-for="(work, idx) in resume.work_experiences" :key="idx" class="work-block">
        <input v-model="work.company" placeholder="公司" />
        <input v-model="work.position" placeholder="职位" />
        <input v-model="work.start_date" type="date" placeholder="开始时间" />
        <input v-model="work.end_date" type="date" placeholder="结束时间" />
        <textarea v-model="work.desc" placeholder="工作内容"></textarea>
        <button class="del-btn" @click.prevent="removeWork(idx)">删除</button>
      </div>
      <button class="add-btn" @click.prevent="addWork">添加工作经历</button>

      <div class="form-btns">
        <button type="submit" class="save-btn">保存</button>
        <button type="button" class="export-btn" @click="exportResume">导出简历</button>
      </div>
    </form>


  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import request from '@/utils/request'


const resume = ref({
  name: '',
  gender: '',
  birthday: '',
  phone: '',
  email: '',
  city: '',
  self_intro: '',
  educations: [],
  work_experiences: [],
  project_experiences: [], 
  skills: [],             
  attachments: []  
})

const fetchResume = async () => {
  const res = await request.get('resume/resume/')
  // 兼容后端返回的数据结构
  resume.value = {
    ...res.data,
    educations: res.data.educations || [],
    work_experiences: res.data.work_experiences || []
  }
}

const saveResume = async () => {
  try {
    await request.post('resume/resume/', resume.value)
    alert('保存成功')
  } catch (err) {
    alert('保存失败: ' + JSON.stringify(err.response?.data || err.message))
  }
}

const exportResume = () => {
  window.print() // 简单导出，可后续优化
}

const handleTemplateSelected = (tpl) => {
  // 这里只做基础信息的自动填充，复杂结构可根据实际模板内容扩展
  resume.value.name = tpl.name || ''
  resume.value.gender = tpl.gender || ''
  resume.value.city = tpl.city || ''
  // 你可以根据模板内容结构进一步完善
  alert('模板内容已应用到表单，请根据需要修改后保存')
}

const addEducation = () => {
  resume.value.educations.push({
    school: '', degree: '', major: '', start_date: '', end_date: '', desc: ''
  })
}
const removeEducation = (idx) => {
  resume.value.educations.splice(idx, 1)
}
const addWork = () => {
  resume.value.work_experiences.push({
    company: '', position: '', start_date: '', end_date: '', desc: ''
  })
}
const removeWork = (idx) => {
  resume.value.work_experiences.splice(idx, 1)
}

onMounted(() => {
  fetchResume()
})
</script>

<style scoped>
.resume-editor-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #f7f8fa;
  min-height: 100vh;
  padding-bottom: 40px;
}
.resume-form {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  padding: 32px 40px;
  width: 480px;
  margin: 40px auto 32px auto;
}
.resume-form h3 {
  margin-top: 18px;
  margin-bottom: 10px;
  color: #00b488;
}
.resume-form input,
.resume-form textarea {
  width: 100%;
  margin-bottom: 10px;
  padding: 8px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  font-size: 15px;
  background: #fafbfc;
  transition: border 0.2s;
}
.resume-form input:focus,
.resume-form textarea:focus {
  border: 1.5px solid #00b488;
  outline: none;
}
.add-btn, .del-btn {
  background: #f5f7fa;
  color: #00b488;
  border: 1px solid #00b488;
  border-radius: 4px;
  padding: 4px 12px;
  margin-bottom: 10px;
  margin-right: 8px;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.2s, color 0.2s;
}
.add-btn:hover, .del-btn:hover {
  background: #00b488;
  color: #fff;
}
.form-btns {
  display: flex;
  gap: 16px;
  margin-top: 18px;
}
.save-btn, .export-btn {
  background: #00b488;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 8px 24px;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.2s;
}
.save-btn:hover, .export-btn:hover {
  background: #009e6d;
}
.edu-block, .work-block {
  border: 1px solid #eee;
  padding: 12px;
  margin-bottom: 12px;
  border-radius: 8px;
  background: #fafbfc;
}
</style> 